{include file="public/_header" /}
<div class="x-body">
    <form class="layui-form" method="post" enctype="multipart/form-data" action="/admin/banner/update">

        <div class="layui-form-item">
            <label  class="layui-form-label">
                <span class="x-red">*</span>跳转链接
            </label>
            <div class="layui-input-inline">
                <input type="text" name="url" required="" lay-verify="required"
                       autocomplete="off" class="layui-input" value="{$data.url}">
            </div>
        </div>


        <div class="layui-form-item">
            <label  class="layui-form-label">
                <span class="x-red">*</span>排序(越小越靠前)
            </label>
            <div class="layui-input-inline">
                <input type="text" name="sort" required="" lay-verify="required"
                       autocomplete="off" class="layui-input"  value="{$data.sort}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">显示设置</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="0" title="下架"  {if	condition="$data.status==0"} checked="checked"  {/if} >
                <input type="radio" name="status" value="1" title="上架"{if	condition="$data.status==1"} checked="checked"  {/if} >
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">Banner图片</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" src="{$data.img}">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>


        <input type="hidden" name="img_url" id="upload_imgs" value="{$data.img}">
        <input type="hidden" name="id" value="{$data.id}">

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>


    </form>
</div>

<script>
    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
                , layer = layui.layer;

        //自定义验证规则
        form.verify({
            nikename: function (value) {
                if (value.length < 5) {
                    return '昵称至少得5个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , repass: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(add)', function (data) {
            console.log(data);
            //发异步，把数据提交给php
            layer.alert("增加成功", {icon: 6}, function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
        });


    });

    layui.use('laydate', function () {
        $ = layui.jquery;
        var laydate = layui.laydate;
        //日期时间范围
        laydate.render({
            elem: '#test10'
            , type: 'datetime'
            , range: true
        });
    });

    layui.use('upload', function () {
        var $ = layui.jquery
                , upload = layui.upload;
        var data = [{
            btnEl: "#test1",
            imgEl: "#demo1",
            uploadShowEl: "upload_imgs",
            errEl: "#demoText"
        }];
        for(var i in data){
            uploadFile({
                btnEl:data[i].btnEl,
                imgEl:data[i].imgEl,
                uploadShowEl:data[i].uploadShowEl,
                errEl:data[i].errEl
            })
        }

        function uploadFile(option) {
            //普通图片上传
            var uploadInst = upload.render({
                        elem: option.btnEl//按钮el
                    , url: '/api/upload/uploadFile'
                    , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $(option.imgEl).attr('src', result); //图片链接（base64）查看显示图片节点id imgEl
                });
            }
        , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                if (res.code == 0) {
                    //do something （比如将res返回的图片链接保存到表单的隐藏域）
                    document.getElementById(option.uploadShowEl).value = res.data.src;    //uploadShowEl 上传成功显示图片节点id
                }
                console.log(res)
                //上传成功
            }
        , error: function () {
                //演示失败状态，并实现重传
                var demoText = $(option.errEl);  //errEl    上传失败上传显示地址
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        }



//        function uplosd(option) {
//            upload.render({
//                elem: '#test1'
//                , url: '/api/upload/uploadFile'
//                , before: function (obj) {
//                    //预读本地文件示例，不支持ie8
//                    obj.preview(function (index, file, result) {
//                        $('#demo1').attr('src', result); //图片链接（base64）
//                    });
//                }
//                , done: function (res) {
//                    //如果上传失败
//                    if (res.code > 0) {
//                        return layer.msg('上传失败');
//                    }
//                    if (res.code == 0) {
//                        //do something （比如将res返回的图片链接保存到表单的隐藏域）
//                        document.getElementById('upload_imgs').value = res.data.src;
//                    }
//                    console.log(res)
//                    //上传成功
//                }
//                , error: function () {
//                    //演示失败状态，并实现重传
//                    var demoText = $('#demoText');
//                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
//                    demoText.find('.demo-reload').on('click', function () {
//                        uploadInst.upload();
//                    });
//                }
//            });
//        }
    });



</script>